@import '../../../assets/css/CommonStyle.scss';
#Doctor-DoctorSetPeriod {
  .doctorSetPeriodHeader {
    margin: 0 m-w(30);
    //height: 18vh;
    .deleteSure {
      color: #d0021b;
      margin-left: m-w(10);
    }
    .tips {
      font-size: m-w(22);
      color: rgba(#333, 0.5);
      margin-top: m-h(30);
      text-align: right;
      span {
        background: rgba(#333, 0.1);
        width: m-w(32);
        height: m-w(32);
        line-height: m-w(32);
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        font-size: m-w(18);
        color: #333;
        margin: 0 m-w(8);
      }
    }
  }

  .periodList {
    //height: 82vh;
    overflow: auto;
    padding: 0 m-w(30);
    padding-top: 12px;
    .periodItem {
      box-shadow: 0 0 16px 0 rgba(87, 82, 82, 0.1);
      border-radius: 8px;
      padding: m-w(32) m-w(16);
      margin-bottom: m-w(24);
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
      .titlePeriod {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 2.2em;
          height: 2.2em;
          line-height: 2.2em;
          font-size: m-w(18);
          background-color: rgba(#333, 0.1);
          border-radius: 50%;
          text-align: center;
        }
        strong {
          font-size: m-w(34);
          margin: 0 12px;
        }
        .deleteIcon {
          width: m-w(32);
          height: m-w(32);
        }
        .editIcon {
          width: m-w(36);
        }
      }

      .tips {
        opacity: 0.5;
        font-size: m-w(22);
      }
      .detailsArrow {
        width: m-w(18);
        margin-left: m-w(20);
        vertical-align: middle;
      }

      .titleArea {
        display: flex;
        justify-content: space-between;
        .tips {
          margin: m-w(5) m-w(30) 0 0;
          float: right;
        }
        .title {
          padding: 0;
          overflow: hidden;
          font-weight: 500;
          margin-right: m-w(54);
        }
        .deleteIcon {
          width: m-w(34);
          height: m-w(34);
          margin: m-w(5) m-w(24) 0 0;
        }
        .editIcon {
          width: m-w(34);
          height: m-w(34);
          margin: m-w(5) 0 0 m-w(26);
        }
        .detailsArrow {
          height: m-w(25);
          width: m-w(25);
          bottom: m-w(20);
          right: m-w(5);
          position: absolute;
        }
        .imgArea {
          width: m-w(136);
        }
      }
      .content {
        font-size: m-w(26);
        color: #afa7a7;
        text-align: left;
      }
    }
  }
}
